@import '../../styles/default.scss';

.log-step{
	padding-bottom: 30px;
	border-left: 1PX solid #E3E5E7;
	border-left: 1PX solid $color-main;
	font-size: $font-15;
	color: $font-color-grey;
	padding-left: 20PX;
	.step-top{
		display: flex;
		align-items: center;
		margin-bottom: 6PX;
		position: relative;
		.step-icon{
			@include wh(20PX, 20PX);
			@include bg('../../assets/step_off.png');
			position: absolute;
			left: -31Px;
			background-color: #fff;
			z-index: 9;
		}
	}
	.step-imgs{
		display: flex;
		align-items: center;
		margin-bottom: 5PX;
		.taro-img{
			@include wh(64PX, 48PX);
			border-radius: 6px;
			margin-right: 18px;
		}
	}
	.step-title-2{
		font-weight: bold;
		margin-bottom: 10PX;
		display: flex;
		align-items: center;
	}
	.step-text{
		font-size: $font-12;
		color: $font-color-grey;
		margin-bottom: 5PX;
	}
	.step-money{
		color: $color-main;
		margin: 0 10px;
	}
	.step-time{
		font-size: $font-12;
		color: $color-grey;
	}
}
.log-step-active{
	color: $font-color-base;
	.step-top{
		.step-icon{
			@include bg('../../assets/step_on.png');
		}
	}
	.step-text{
		color: $font-color-base;
	}
	.step-time{
		color: $font-color-base;
	}
}
.step-title-1{
	display: flex;
	align-items: baseline;
}
.step-pay{
	color: $color-red;
	font-size: $font-16;
	font-weight: bold;
	margin-left: 20px;
}
.pay-success{

	color: $color-main;
}

.rate-num{
	.at-rate__icon--on{
		color: $color-main;
	}
}